<!--宠物健康报告-->
<template>
  <div class="body_1647249">
    <div style="display: flex; flex-wrap: wrap; gap: 10px;margin: 10px;" class="coverImg">
      <img class="pet_cover_imgs"
           v-for="(item, index) in petInfo"
           :key="index"
           :src="item.coverImg"
           @click="changeIndex(index)"/>
    </div>
    <div class="div">
      <div class="div_1">
        <!--        宠物信息栏-->
        <div class="div_2">
          <div class="div_3">
            <div>
              <img class="img"
                   :src="chosePetTotalInfo?.petImgs?.mainImg || 'https://seal-img.nos-jd.163yun.com/obj/w5rCgMKVw6DCmGzCmsK-/58090668590/d0fd/52e3/18b3/b496860f6bf7b8b53e3039cb39204f80.png'"
                   alt="宠物图片"
                   v-if="chosePetTotalInfo && chosePetTotalInfo.petImgs"
              >
            </div>
          </div>
          <div class="div_4">
            <div class="div_5"><span class="text"> {{ petInfo[selected].petName }} </span></div>
            <div class="div_6">
              <div class="div_7"><span class="text_2"> {{ petInfo[selected].specis }} </span></div>
              <div class="div_8"><span class="text_4"> {{ petInfo[selected].age }}岁 </span></div>
              <div class="div_9"><span class="text_6"> {{ petInfo[selected].weight }}kg </span></div>
              <div class="div_10"><span
                  class="text_8">{{
                  convertDate(chosePetTotalInfo.examinationRecordList[chosePetTotalInfo.examinationRecordList.length - 1]?.createdAt ?? '暂未体检')
                }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--   三个折线图   -->
      <div class="div_11">
        <div class="div_12">
          <div class="div_13">
            <span class="text_10"> 体重趋势 </span>
            <div class="button">
              <!--              <img-->
              <!--                  class="svg"-->
              <!--                  />-->
            </div>
          </div>
<!--          折线图-->
          <div class="div_14" ref="chart">

          </div>
        </div>
        <div class="div_16">
          <div class="div_17">
            <span class="text_11"> 健康评分 </span>
            <div class="button_1">
              <el-button style="margin-top: -20px" circle @click="addPDD">+</el-button>
            </div>
          </div>
          <div class="div_18" ref="chart2">

          </div>
        </div>
        <div class="div_20">
          <div class="div_21">
            <span class="text_12"> 活动量 </span>
            <div class="button_2">
              <el-button style="margin-top: -20px" circle @click="addPDD">+</el-button>
            </div>
          </div>
          <div class="div_22" ref="chart3">
          </div>
        </div>
      </div>
      <div class="div_24">
        <span class="text_13"> 健康建议 </span>
        <div class="div_25">
          <div class="flexcontainer">
            <div class="div_26">
              <div class="i">
                <img
                    class="svg_3"
                    src="https://seal-img.nos-jd.163yun.com/obj/w5rCgMKVw6DCmGzCmsK-/58090673052/b98d/8862/3259/1d3bb818df4e3daa8718a59099ae74ac.png"/>
              </div>
              <div class="div_27">
                <span class="text_14"> 营养建议 </span
                ><span class="text_15"> {{ suggestion.suggest1 }}</span>
              </div>
            </div>
            <div class="div_28">
              <div class="i_1">
                <img
                    class="svg_4"
                    src="https://seal-img.nos-jd.163yun.com/obj/w5rCgMKVw6DCmGzCmsK-/58090672208/b9db/3a99/6755/0cda730c71d7444b35703a8c1dc961c4.png"/>
              </div>
              <div class="div_29">
                <span class="text_16"> 运动建议 </span
                ><span class="text_17"> {{ suggestion.suggest2 }} </span>
              </div>
            </div>
          </div>
          <div class="flexcontainer_1">
            <div class="div_30">
              <div class="i_2">
                <img
                    class="svg_5"
                    src="https://seal-img.nos-jd.163yun.com/obj/w5rCgMKVw6DCmGzCmsK-/58090672242/1fb1/edea/79ea/c718124444893dff65060a8b38f884d0.png"/>
              </div>
              <div class="div_31">
                <span class="text_18"> 疫苗提醒 </span><span class="text_19"> {{ suggestion.suggest3 }} </span>
              </div>
            </div>
            <div class="div_32">
              <div class="i_3">
                <img
                    class="svg_6"
                    src="https://seal-img.nos-jd.163yun.com/obj/w5rCgMKVw6DCmGzCmsK-/58090674178/24c8/7f72/1e2d/10f7cf538d38d25356eab9536b938249.png"/>
              </div>
              <div class="div_33">
                <span class="text_20"> 日常护理 </span><span class="text_21">  {{ suggestion.suggest4 }} </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
        v-model="centerDialogVisible"
        title="添加宠物每日信息"
        width="300"
        align-center
    >
      <el-form :model="PDDInfo" label-width="auto" style="max-width: 600px">
        <el-form-item label="可爱值">
          <el-input-number v-model="PDDInfo.cute" :min="1" :max="100" placeholder="输入1-100"/>
        </el-form-item>
        <el-form-item label="活跃值">
          <el-input-number v-model="PDDInfo.active" :min="1" :max="100"/>
        </el-form-item>
        <el-form-item label="食欲">
          <el-input-number v-model="PDDInfo.appetite" :min="1" :max="100"/>
        </el-form-item>
        <el-form-item label="身体">
          <el-input-number v-model="PDDInfo.body" :min="1" :max="100"/>
        </el-form-item>
        <el-form-item label="行为">
          <el-input-number v-model="PDDInfo.behavior" :min="1" :max="100"/>
        </el-form-item>
        <el-form-item label="五官">
          <el-input-number v-model="PDDInfo.features" :min="1" :max="100"/>
        </el-form-item>
        <el-form-item label="散步">
          <el-input-number v-model="PDDInfo.walking" :min="1" :max="1440"/>
        </el-form-item>
        <el-form-item label="玩耍">
          <el-input-number v-model="PDDInfo.playing" :min="1" :max="1440"/>
        </el-form-item>
        <el-form-item label="游泳">
          <el-input-number v-model="PDDInfo.swimming" :min="1" :max="1440"/>
        </el-form-item>
        <el-form-item label="训练">
          <el-input-number v-model="PDDInfo.training" :min="1" :max="1440"/>
        </el-form-item>
        <el-form-item label="互动">
          <el-input-number v-model="PDDInfo.interaction" :min="1" :max="1440"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancelPDDInfo()">取消</el-button>
          <el-button type="primary" @click="addPDDInfo()">
            提交
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>


<script>
import * as echarts from 'echarts';
import {addPetDailyInfo, getPetListAPI, getTotalInfoById} from "@/api/petApi";
import {getDaysDifference, parseTime2, parseTime3} from "@/utils/timeUtil";
import {ElNotification} from "element-plus";

export default {
  name: "HealthReports",
  data() {
    return {
      PDDInfo: {
        petId: 0,
        cute: 50,
        active: 50,
        appetite: 50,
        body: 50,
        behavior: 50,
        features: 50,
        walking: 50,
        playing: 50,
        swimming: 50,
        training: 50,
        interaction: 50
      },
      centerDialogVisible: false,
      selected: 0,
      petInfo: [
        {
          petId: 0,
          petName: "",
          specis: "",
          age: 0,
          weight: 0,
          gender: 0,
          dateOfBirth: 0,
          size: "",
          hairLength: "",
          color: "",
          vaccinationReconds: 0,
          vaccinationRecond: '',
          dewormingRecords: 0,
          dewormingRecord: '',
          medicalHistory: "无",
          allergyHistory: "无",
          personalityTraits: "",
          dietaryHabits: "",
          activityPreferences: "",
          sleepHabits: "",
          sportHabits: "",
          coverImg: "",
          mainImg: "",
          imgs: ""
        }
      ],
      // 折线图
      option: {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
          }
        ]
      },

      option2: {
        title: {
          text: ' '
        },
        legend: {
          data: ['宠物数据']
        },
        radar: {
          shape: 'circle',
          indicator: [
            {name: '活跃', max: 100},
            {name: '食欲', max: 100},
            {name: '身体', max: 100},
            {name: '行为', max: 100},
            {name: '五官', max: 100},
            {name: '可爱', max: 100}
          ]
        },
        series: [
          {
            name: 'Budget vs spending',
            type: 'radar',
            data: [
              {
                value: [99, 88, 77, 66, 55, 44],
                name: '宠物数据'
              },
            ]
          }
        ]

      },
      chosePetTotalInfo: {
        id: 1,
        anomalyRecordList: [],
        petsActivitiesList: [],
        petDrinkList: [],
        petImgs: [],
        vaccinationRecordList: [],
        examinationRecordList: [],
        dailyData: [],
      },
      option3: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            chosePetId: 1,
            data: [
              {value: 99, name: '散步'},
              {value: 88, name: '玩耍'},
              {value: 77, name: '游泳'},
              {value: 66, name: '训练'},
              {value: 55, name: '互动'}
            ]
          }
        ]
      },
      suggestion: {suggest1: '', suggest2: '', suggest3: '', suggest4: ''}
    }
  },
  methods: {
    cancelPDDInfo() {
      this.PDDInfo = {
        petId: 50,
        cute: 50,
        active: 50,
        appetite: 50,
        body: 50,
        behavior: 50,
        features: 50,
        walking: 50,
        playing: 50,
        swimming: 50,
        training: 50,
        interaction: 50
      }
      this.centerDialogVisible = false
    },
    validatePDDInfo() {
      // 定义字段对应的合法范围
      const rules = {
        range1: {min: 0, max: 100, keys: ["cute", "active", "appetite", "body", "behavior", "features"]},
        range2: {min: 0, max: 1440, keys: ["walking", "playing", "swimming", "training", "interaction"]}
      };

      // 记录所有错误信息
      let errors = [];

      // 校验函数
      const checkRange = (key, min, max) => {
        let value = this.PDDInfo[key];

        // 处理 null、undefined、非数字情况，默认转为 0
        if (value == null || isNaN(value)) {
          value = 0;
          this.PDDInfo[key] = value; // 确保值有默认值
        }

        // 判断是否在范围内
        if (value < min || value > max) {
          errors.push(`${key} 值 ${value} 超出范围 (${min}-${max})`);
        }
      };
      // 遍历校验
      rules.range1.keys.forEach(key => checkRange(key, rules.range1.min, rules.range1.max));
      rules.range2.keys.forEach(key => checkRange(key, rules.range2.min, rules.range2.max));
      // 如果有错误，弹出提示
      if (errors.length > 0) {
        ElNotification({
          title: "数据校验失败",
          message: errors.join("; "), // 多个错误用 `; ` 连接
          type: "error",
        });
        return false;
      }
      return true;
    },
    addPDDInfo() {
      this.validatePDDInfo()
      this.PDDInfo.petId = this.chosePetId
      addPetDailyInfo(this.PDDInfo).then(res => {
        if (res.code === 200) {
          ElNotification({
            title: "添加成功",
            message: "添加成功",
            type: "success",
          });
          this.cancelPDDInfo()
        }
      })
    },
    addPDD() {
      this.centerDialogVisible = !this.centerDialogVisible
    },
    convertDate(date) {
      if (date === '暂未体检') {
        return date;
      }
      return parseTime2(date);
    },
    getPetInfo: function () {
      getPetListAPI().then(res => {
        this.petInfo = res.data.map(item => {
          const updatedItem = {...item}; //
          updatedItem.personalityTrait = updatedItem.personalityTraits.split(';');
          if (updatedItem.imgs && updatedItem.imgs.includes(';')) {
            updatedItem.phtos = updatedItem.imgs.split(';');
          }
          updatedItem.dateOfBirth = parseTime2(updatedItem.dateOfBirth);
          return updatedItem;
        });
      });
    },
    queryTotalInfo() {
      getTotalInfoById(this.chosePetId).then(res => {
        this.chosePetTotalInfo = res.data
        this.option.series[0].data = []
        this.option.xAxis.data = []
        this.option2.series[0].data[0].value = []
        this.option3.series[0].data = []
        let a = 0
        let b = 0
        let c = 0
        let d = 0
        let e = 0
        let f = 0
        let g = 0
        let h = 0
        let i = 0
        let j = 0
        let k = 0
        this.chosePetTotalInfo.examinationRecordList.forEach(v => {
          this.option.series[0].data.push(v.weight)
          this.option.xAxis.data.push(parseTime3(v.createdAt))
        })
        this.chosePetTotalInfo.dailyData.forEach(v => {
          a += v.active ?? 0;
          b += v.cute ?? 0;
          c += v.features ?? 0;
          d += v.behavior ?? 0;
          e += v.body ?? 0;
          f += v.appetite ?? 0;
          g += v.walking ?? 0;
          h += v.playing ?? 0;
          i += v.swimming ?? 0;
          j += v.training ?? 0;
          k += v.interaction ?? 0;
        })
        a = Number((a / this.chosePetTotalInfo.dailyData.length).toFixed(0));
        b = Number((b / this.chosePetTotalInfo.dailyData.length).toFixed(0));
        c = Number((c / this.chosePetTotalInfo.dailyData.length).toFixed(0));
        d = Number((d / this.chosePetTotalInfo.dailyData.length).toFixed(0));
        e = Number((e / this.chosePetTotalInfo.dailyData.length).toFixed(0));
        f = Number((f / this.chosePetTotalInfo.dailyData.length).toFixed(0));
        g = Number((g / this.chosePetTotalInfo.dailyData.length).toFixed(0));
        h = Number((h / this.chosePetTotalInfo.dailyData.length).toFixed(0));
        i = Number((i / this.chosePetTotalInfo.dailyData.length).toFixed(0));
        j = Number((j / this.chosePetTotalInfo.dailyData.length).toFixed(0));
        k = Number((k / this.chosePetTotalInfo.dailyData.length).toFixed(0));
        this.initChart()
        this.option2.series[0].data[0].value.push(a)
        this.option2.series[0].data[0].value.push(b)
        this.option2.series[0].data[0].value.push(c)
        this.option2.series[0].data[0].value.push(d)
        this.option2.series[0].data[0].value.push(e)
        this.option2.series[0].data[0].value.push(f)
        this.option3.series[0].data.push({value: g, name: '散步'})
        this.option3.series[0].data.push({value: h, name: '玩耍'})
        this.option3.series[0].data.push({value: i, name: '游泳'})
        this.option3.series[0].data.push({value: j, name: '训练'})
        this.option3.series[0].data.push({value: k, name: '互动'})
        this.initChart2();
        this.initChart3();
        this.role()
      })
    },
    initChart() {
      const chart = echarts.init(this.$refs.chart);
      chart.setOption(this.option);
    },
    initChart2() {
      const chart2 = echarts.init(this.$refs.chart2);
      chart2.setOption(this.option2);
    },
    initChart3() {
      const chart3 = echarts.init(this.$refs.chart3);
      chart3.setOption(this.option3);
    }, changeIndex(index) {
      this.selected = index;
      this.chosePetId = this.petInfo[index].petId;
      this.queryTotalInfo();
    },
    role() {
      const { chosePetTotalInfo, suggestion } = this;

      // 获取 dailyData 最后一天的记录
      const lastDailyData = chosePetTotalInfo?.dailyData?.[chosePetTotalInfo.dailyData.length - 1];
      suggestion.suggest1 = '宠物营养正常，请继续保持！';
      if (lastDailyData?.appetite < 50) {
        suggestion.suggest1 = '宠物营养低，请提供更多的食物，以增加能量消耗。如：增加蛋白质。提供高质量的蛋白质食物，如鱼、鸡肉、牛肉和鸡蛋，可以帮助宠物补充营养！';
      }else{
      }

      // 获取 petsActivitiesList 最后一天的记录
      const lastActivity = chosePetTotalInfo?.petsActivitiesList?.[chosePetTotalInfo.petsActivitiesList.length - 1];
      suggestion.suggest2 = "宠物活动量正常，请继续保持！";
      if (lastActivity?.walk < 20) {
        suggestion.suggest2 = "宠物活动量低，提供更多的运动机会，如散步、玩耍或游泳，以增加能量消耗！";
      } else if (lastActivity?.walk > 60) {
        suggestion.suggest2 = "宠物活动量高，请及时联系医生！";
      }

      // 处理疫苗接种情况
      const vaccineCount = chosePetTotalInfo?.vaccinationRecordList?.length || 0;
      suggestion.suggest3 = vaccineCount >= 3
          ? '所有疫苗已经接种完成，现在很健康'
          : '请及时去医院接种疫苗~';

      // 获取体检记录最后一次的体重
      const lastExamination = chosePetTotalInfo?.examinationRecordList?.[chosePetTotalInfo.examinationRecordList.length - 1];
      suggestion.suggest4 = "宠物很健康哟~请继续保持！";
      if (lastExamination?.weight > 10) {
        suggestion.suggest4 = "体重超标！请注意！请提供更多的运动机会，如散步、玩耍或游泳，以增加能量消耗。选择低热量、高纤维的宠物食品，帮助控制体重。定期监测宠物的体重，确保减重计划的有效性。";
      } else if (lastExamination?.weight < 5) {
        suggestion.suggest4 = "体重偏瘦！请注意！提供高质量的宠物食品，确保足够的蛋白质、脂肪和必要的维生素。可以考虑增加每日的喂食量或次数。";
      }
    },
  },
  mounted() {
    this.getPetInfo()
    this.initChart();
    this.initChart2();
    this.initChart3();
    this.changeIndex(0)
  }
}
</script>

<style scoped>
/* BODY-1647249 */
.body_1647249 {
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: #f9fafb;
  min-height: 100%;
}

/* DIV */
.div {
  width: 1280px;
  height: 1032px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 48px;
  padding-right: 32px;
  padding-bottom: 48px;
  padding-left: 32px;
  gap: 10px;
  position: relative;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
}

/* DIV */
.div_1 {
  width: 1216px;
  height: 176px;
  position: absolute;
  top: 48px;
  left: 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 24px;
  padding-right: 24px;
  padding-bottom: 24px;
  padding-left: 24px;
  gap: 10px;
  flex-shrink: 0;
  border-radius: 8px;
  background: linear-gradient(0, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(0, #ffffff, #ffffff);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
}

/* DIV */
.div_2 {
  width: 1168px;
  height: 128px;
  position: absolute;
  top: 24px;
  left: 24px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-shrink: 0;
}

/* DIV */
.div_3 {
  position: absolute;
  width: 128px;
  height: 128px;
  top: 0;
  left: 0;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* IMG */
.img {
  width: 100%;
  height: 128px;
  /*background: url(https://seal-img.nos-jd.163yun.com/obj/w5rCgMKVw6DCmGzCmsK-/58090668590/d0fd/52e3/18b3/b496860f6bf7b8b53e3039cb39204f80.png) center / cover no-repeat;*/
  position: relative;
  margin-top: 0;
  margin-left: 0;
}

/* DIV */
.div_4 {
  position: absolute;
  width: 1008px;
  height: 112px;
  top: 0;
  left: 160px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* DIV */
.div_5 {
  width: 100%;
  height: 40px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: relative;
  margin-top: 0;
  margin-left: 0;
}

/* H1 */
.text {
  width: 72px;
  height: 32px;
  position: absolute;
  top: 4px;
  left: 0;
  flex-shrink: 0;
  font-size: 24px;
  font-family: Roboto;
  font-weight: 500;
  line-height: 32px;
  color: #000000;
  white-space: pre;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}

/* BUTTON */
.text_1 {
  width: 112px;
  height: 40px;
  position: absolute;
  top: 0;
  left: 896px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 8px;
  padding-right: 24px;
  padding-bottom: 8px;
  padding-left: 24px;
  gap: 10px;
  flex-shrink: 0;
  border-radius: 4px;
  background-color: #9333ea;
  text-align: center;
  font-size: 16px;
  font-family: Roboto;
  font-weight: 400;
  line-height: 24px;
  color: #ffffff;
  white-space: pre;
}

/* DIV */
.div_6 {
  position: relative;
  width: 100%;
  height: 48px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin-top: 24px;
  margin-left: 0;
}

/* DIV */
.div_7 {
  position: relative;
  width: 228px;
  height: 48px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 0;
  margin-top: 0;
}

/* DIV */
.text_2 {
  width: 100%;
  height: 20px;
  font-size: 14px;
  font-family: Roboto;
  font-weight: 400;
  line-height: 20px;
  color: #4b5563;
  white-space: pre;
  padding-top: 0;
  padding-right: 200px;
  padding-bottom: 0;
  padding-left: 0;
  position: relative;
  margin-top: 0;
  margin-left: 0;
}

/* DIV */
.text_3 {
  width: 100%;
  height: 24px;
  font-size: 16px;
  font-family: Roboto;
  font-weight: 500;
  line-height: 24px;
  color: #4b5563;
  white-space: pre;
  padding-top: 0;
  padding-right: 148px;
  padding-bottom: 0;
  padding-left: 0;
  position: relative;
  margin-top: 4px;
  margin-left: 0;
}

/* DIV */
.div_8 {
  position: relative;
  width: 228px;
  height: 48px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 32px;
  margin-top: 0;
}

/* DIV */
.text_4 {
  width: 100%;
  height: 20px;
  font-size: 14px;
  font-family: Roboto;
  font-weight: 400;
  line-height: 20px;
  color: #4b5563;
  white-space: pre;
  padding-top: 0;
  padding-right: 200px;
  padding-bottom: 0;
  padding-left: 0;
  position: relative;
  margin-top: 0;
  margin-left: 0;
}

/* DIV */
.text_5 {
  width: 100%;
  height: 24px;
  font-size: 16px;
  font-family: Roboto;
  font-weight: 500;
  line-height: 24px;
  color: #4b5563;
  white-space: pre;
  padding-top: 0;
  padding-right: 149px;
  padding-bottom: 0;
  padding-left: 0;
  position: relative;
  margin-top: 4px;
  margin-left: 0;
}

/* DIV */
.div_9 {
  position: relative;
  width: 228px;
  height: 48px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 32px;
  margin-top: 0;
}

/* DIV */
.text_6 {
  width: 100%;
  height: 20px;
  font-size: 14px;
  font-family: Roboto;
  font-weight: 400;
  line-height: 20px;
  color: #4b5563;
  white-space: pre;
  padding-top: 0;
  padding-right: 200px;
  padding-bottom: 0;
  padding-left: 0;
  position: relative;
  margin-top: 0;
  margin-left: 0;
}

/* DIV */
.text_7 {
  width: 100%;
  height: 24px;
  font-size: 16px;
  font-family: Roboto;
  font-weight: 500;
  line-height: 24px;
  color: #4b5563;
  white-space: pre;
  padding-top: 0;
  padding-right: 184px;
  padding-bottom: 0;
  padding-left: 0;
  position: relative;
  margin-top: 4px;
  margin-left: 0;
}

/* DIV */
.div_10 {
  position: relative;
  width: 228px;
  height: 48px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 32px;
  margin-top: 0;
}

/* DIV */
.text_8 {
  width: 100%;
  height: 20px;
  font-size: 14px;
  font-family: Roboto;
  font-weight: 400;
  line-height: 20px;
  color: #4b5563;
  white-space: pre;
  padding-top: 0;
  padding-right: 172px;
  padding-bottom: 0;
  padding-left: 0;
  position: relative;
  margin-top: 0;
  margin-left: 0;
}

/* DIV */
.text_9 {
  width: 100%;
  height: 24px;
  font-size: 16px;
  font-family: Roboto;
  font-weight: 500;
  line-height: 24px;
  color: #4b5563;
  white-space: pre;
  padding-top: 0;
  padding-right: 144px;
  padding-bottom: 0;
  padding-left: 0;
  position: relative;
  margin-top: 4px;
  margin-left: 0;
}

/* DIV */
.div_11 {
  position: absolute;
  width: 1216px;
  height: 356px;
  top: 256px;
  left: 32px;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

/* DIV */
.div_12 {
  width: 384px;
  height: 356px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 24px;
  padding-right: 24px;
  padding-bottom: 24px;
  padding-left: 24px;
  gap: 10px;
  border-radius: 8px;
  background: linear-gradient(0, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(0, #ffffff, #ffffff);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  position: relative;
  margin-left: 0;
  margin-top: 0;
}

/* DIV */
.div_13 {
  width: 336px;
  height: 28px;
  position: absolute;
  top: 24px;
  left: 24px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

/* H3 */
.text_10 {
  width: 72px;
  height: 28px;
  position: absolute;
  top: 0;
  left: 0;
  flex-shrink: 0;
  font-size: 18px;
  font-family: Roboto;
  font-weight: 500;
  line-height: 28px;
  color: #000000;
  white-space: pre;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}

/* BUTTON */
.button {
  position: absolute;
  width: 14px;
  height: 20px;
  top: 4px;
  left: 322px;
  flex-shrink: 0;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* SVG */
.svg {
  width: 100%;
  height: 14px;
  position: relative;
  margin-top: 3px;
  margin-left: 0;
}

/* DIV */
.div_14 {
  position: absolute;
  width: 336px;
  height: 256px;
  top: 76px;
  left: 24px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* DIV */
.div_15 {
  position: relative;
  width: 100%;
  height: 256px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 0;
  margin-left: 0;
}

/* CANVAS */
.canvas {
  width: 100%;
  height: 256px;
  background: url(https://seal-img.nos-jd.163yun.com/obj/w5rCgMKVw6DCmGzCmsK-/58090671470/3a6d/03e9/d724/37d4aadd3ef328e1fb7ccc027f55e5e2.png) center / cover no-repeat;
  position: relative;
  margin-top: 0;
  margin-left: 0;
}

/* DIV */
.div_16 {
  width: 384px;
  height: 356px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 24px;
  padding-right: 24px;
  padding-bottom: 24px;
  padding-left: 24px;
  gap: 10px;
  border-radius: 8px;
  background: linear-gradient(0, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(0, #ffffff, #ffffff);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  position: relative;
  margin-left: 32px;
  margin-top: 0;
}

/* DIV */
.div_17 {
  width: 336px;
  height: 28px;
  position: absolute;
  top: 24px;
  left: 24px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

/* H3 */
.text_11 {
  width: 72px;
  height: 28px;
  position: absolute;
  top: 0;
  left: 0;
  flex-shrink: 0;
  font-size: 18px;
  font-family: Roboto;
  font-weight: 500;
  line-height: 28px;
  color: #000000;
  white-space: pre;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}

/* BUTTON */
.button_1 {
  position: absolute;
  width: 14px;
  height: 20px;
  top: 4px;
  left: 322px;
  flex-shrink: 0;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* SVG */
.svg_1 {
  width: 100%;
  height: 14px;
  position: relative;
  margin-top: 3px;
  margin-left: 0;
}

/* DIV */
.div_18 {
  position: absolute;
  width: 336px;
  height: 256px;
  top: 76px;
  left: 24px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* DIV */
.div_19 {
  position: relative;
  width: 100%;
  height: 256px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 0;
  margin-left: 0;
}

/* CANVAS */
.canvas_1 {
  width: 100%;
  height: 256px;
  background: url(https://seal-img.nos-jd.163yun.com/obj/w5rCgMKVw6DCmGzCmsK-/58090671511/4758/be5f/6098/f40ce05e65cfcfcecfa95a1aa9e940cd.png) center / cover no-repeat;
  position: relative;
  margin-top: 0;
  margin-left: 0;
}

/* DIV */
.div_20 {
  width: 384px;
  height: 356px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 24px;
  padding-right: 24px;
  padding-bottom: 24px;
  padding-left: 24px;
  gap: 10px;
  border-radius: 8px;
  background: linear-gradient(0, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(0, #ffffff, #ffffff);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  position: relative;
  margin-left: 32px;
  margin-top: 0;
}

/* DIV */
.div_21 {
  width: 336px;
  height: 28px;
  position: absolute;
  top: 24px;
  left: 24px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

/* H3 */
.text_12 {
  width: 54px;
  height: 28px;
  position: absolute;
  top: 0;
  left: 0;
  flex-shrink: 0;
  font-size: 18px;
  font-family: Roboto;
  font-weight: 500;
  line-height: 28px;
  color: #000000;
  white-space: pre;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}

/* BUTTON */
.button_2 {
  position: absolute;
  width: 14px;
  height: 20px;
  top: 4px;
  left: 322px;
  flex-shrink: 0;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* SVG */
.svg_2 {
  width: 100%;
  height: 14px;
  position: relative;
  margin-top: 3px;
  margin-left: 0;
}

/* DIV */
.div_22 {
  position: absolute;
  width: 336px;
  height: 256px;
  top: 76px;
  left: 24px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* DIV */
.div_23 {
  position: relative;
  width: 100%;
  height: 256px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 0;
  margin-left: 0;
}

/* CANVAS */
.canvas_2 {
  width: 100%;
  height: 256px;
  background: url(https://seal-img.nos-jd.163yun.com/obj/w5rCgMKVw6DCmGzCmsK-/58090673012/01e2/eae3/c4df/40df90bf1c513e528a0444604bd51bb2.png) center / cover no-repeat;
  position: relative;
  margin-top: 0;
  margin-left: 0;
}

/* DIV */
.div_24 {
  width: 1216px;
  height: 340px;
  position: absolute;
  top: 644px;
  left: 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 24px;
  padding-right: 24px;
  padding-bottom: 24px;
  padding-left: 24px;
  gap: 10px;
  flex-shrink: 0;
  border-radius: 8px;
  background: linear-gradient(0, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(0, #ffffff, #ffffff);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
}

/* H3 */
.text_13 {
  width: 1168px;
  height: 28px;
  position: absolute;
  top: 24px;
  left: 24px;
  flex-shrink: 0;
  font-size: 18px;
  font-family: Roboto;
  font-weight: 500;
  line-height: 28px;
  color: #000000;
  white-space: pre;
  padding-top: 0;
  padding-right: 1096px;
  padding-bottom: 0;
  padding-left: 0;
}

/* DIV */
.div_25 {
  position: absolute;
  width: 1168px;
  height: 240px;
  top: 76px;
  left: 24px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* flexContainer */
.flexcontainer {
  position: relative;
  display: flex;
  width: 100%;
  height: 104px;
  flex-direction: row;
  align-items: flex-start;
  margin-top: 0;
  margin-left: 0;
}

/* DIV */
.div_26 {
  width: 568px;
  height: 104px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 16px;
  padding-right: 16px;
  padding-bottom: 16px;
  padding-left: 16px;
  border-radius: 8px;
  background-color: #f0fdf4;
  position: relative;
  margin-left: 0;
  margin-top: 0;
}

/* I */
.i {
  position: absolute;
  width: 21px;
  height: 32px;
  top: 16px;
  left: 16px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* SVG */
.svg_3 {
  width: 100%;
  height: 24px;
  position: relative;
  margin-top: 4px;
  margin-left: 0;
}

/* DIV */
.div_27 {
  position: absolute;
  width: 499px;
  height: 72px;
  top: 16px;
  left: 53px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* H4 */
.text_14 {
  width: 100%;
  height: 24px;
  font-size: 16px;
  font-family: Roboto;
  font-weight: 500;
  line-height: 24px;
  color: #000000;
  white-space: pre;
  padding-top: 0;
  padding-right: 435px;
  padding-bottom: 0;
  padding-left: 0;
  position: relative;
  margin-top: 0;
  margin-left: 0;
}

/* P */
.text_15 {
  width: 100%;
  height: 40px;
  font-size: 14px;
  font-family: Roboto;
  font-weight: 400;
  line-height: 20px;
  color: #4b5563;
  padding-top: 0;
  padding-right: 9px;
  padding-bottom: 0;
  padding-left: 0;
  position: relative;
  margin-top: 8px;
  margin-left: 0;
}

/* DIV */
.div_28 {
  width: 568px;
  height: 104px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 16px;
  padding-right: 16px;
  padding-bottom: 16px;
  padding-left: 16px;
  border-radius: 8px;
  background-color: #eff6ff;
  position: relative;
  margin-left: 32px;
  margin-top: 0;
}

/* I */
.i_1 {
  position: absolute;
  width: 21px;
  height: 32px;
  top: 16px;
  left: 16px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* SVG */
.svg_4 {
  width: 20px;
  height: 24px;
  position: relative;
  margin-top: 4px;
  margin-left: auto;
  margin-right: auto;
}

/* DIV */
.div_29 {
  position: absolute;
  width: 499px;
  height: 72px;
  top: 16px;
  left: 53px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* H4 */
.text_16 {
  width: 100%;
  height: 24px;
  font-size: 16px;
  font-family: Roboto;
  font-weight: 500;
  line-height: 24px;
  color: #000000;
  white-space: pre;
  padding-top: 0;
  padding-right: 435px;
  padding-bottom: 0;
  padding-left: 0;
  position: relative;
  margin-top: 0;
  margin-left: 0;
}

/* P */
.text_17 {
  width: 100%;
  height: 40px;
  font-size: 14px;
  font-family: Roboto;
  font-weight: 400;
  line-height: 20px;
  color: #4b5563;
  padding-top: 0;
  padding-right: 10px;
  padding-bottom: 0;
  padding-left: 0;
  position: relative;
  margin-top: 8px;
  margin-left: 0;
}

/* flexContainer */
.flexcontainer_1 {
  position: relative;
  display: flex;
  width: 100%;
  height: 104px;
  flex-direction: row;
  align-items: flex-start;
  margin-top: 32px;
  margin-left: 0;
}

/* DIV */
.div_30 {
  width: 568px;
  height: 104px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 16px;
  padding-right: 16px;
  padding-bottom: 16px;
  padding-left: 16px;
  border-radius: 8px;
  background-color: #fefce8;
  position: relative;
  margin-left: 0;
  margin-top: 0;
}

/* I */
.i_2 {
  position: absolute;
  width: 24px;
  height: 32px;
  top: 16px;
  left: 16px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* SVG */
.svg_5 {
  width: 100%;
  height: 24px;
  position: relative;
  margin-top: 4px;
  margin-left: 0;
}

/* DIV */
.div_31 {
  position: absolute;
  width: 496px;
  height: 72px;
  top: 16px;
  left: 56px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* H4 */
.text_18 {
  width: 100%;
  height: 24px;
  font-size: 16px;
  font-family: Roboto;
  font-weight: 500;
  line-height: 24px;
  color: #000000;
  white-space: pre;
  padding-top: 0;
  padding-right: 432px;
  padding-bottom: 0;
  padding-left: 0;
  position: relative;
  margin-top: 0;
  margin-left: 0;
}

/* P */
.text_19 {
  width: 100%;
  height: 40px;
  font-size: 14px;
  font-family: Roboto;
  font-weight: 400;
  line-height: 20px;
  color: #4b5563;
  padding-top: 0;
  padding-right: 11px;
  padding-bottom: 0;
  padding-left: 0;
  position: relative;
  margin-top: 8px;
  margin-left: 0;
}

/* DIV */
.div_32 {
  width: 568px;
  height: 104px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 16px;
  padding-right: 16px;
  padding-bottom: 16px;
  padding-left: 16px;
  border-radius: 8px;
  background-color: #fef2f2;
  position: relative;
  margin-left: 32px;
  margin-top: 0;
}

/* I */
.i_3 {
  position: absolute;
  width: 24px;
  height: 32px;
  top: 16px;
  left: 16px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* SVG */
.svg_6 {
  width: 100%;
  height: 24px;
  position: relative;
  margin-top: 4px;
  margin-left: 0;
}

/* DIV */
.div_33 {
  position: absolute;
  width: 496px;
  height: 72px;
  top: 16px;
  left: 56px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* H4 */
.text_20 {
  width: 100%;
  height: 24px;
  font-size: 16px;
  font-family: Roboto;
  font-weight: 500;
  line-height: 24px;
  color: #000000;
  white-space: pre;
  padding-top: 0;
  padding-right: 432px;
  padding-bottom: 0;
  padding-left: 0;
  position: relative;
  margin-top: 0;
  margin-left: 0;
}

/* P */
.text_21 {
  width: 100%;
  height: 40px;
  font-size: 14px;
  font-family: Roboto;
  font-weight: 400;
  line-height: 20px;
  color: #4b5563;
  padding-top: 0;
  padding-right: 24px;
  padding-bottom: 0;
  padding-left: 0;
  position: relative;
  margin-top: 8px;
  margin-left: 0;
}

.pet_cover_imgs {
  object-fit: cover;
  height: 45px;
  width: 45px;
  border-radius: 20px;
  border: #a7b1bb solid 2px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 90ms ease;
}

.pet_cover_imgs:hover {
  cursor: pointer;
  transform: scale(1.1);
  transition: height 300ms ease, transform 300ms ease; /* 过渡动画 */

}

.pet_cover_imgs:hover {
  transform: translateY(0);
}

.pet_cover_imgs:not(:hover) {
  transform: translateY(-25px);
}
</style>